<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Transaction</title>
<link rel="stylesheet" type="text/css" href="css/site.css">
<style type="text/css">
.error_strings {
	font-family: Verdana;
	font-size: 14px;
	color: #660000;
}
</style>
<style>
th {
	width: 100px;
}
</style>
<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="scripts/script.js"></script>
<script type="text/javascript" src="scripts/validate.js"></script>
<script type="text/javascript">
function confirm_function(cost)
{
	var str = "http://" + document.location.host + '/Banking/Bank';
	var isErrors = $("#errors").val();
	if(isErrors == "true"){
		$("#errors").val("false");
	} else {
		var errors = $('#error_box2');
		errors.empty();
	    var name = $("#holder").val();
	    var account = $("#account").val();
	    var routing = $("#routing").val();
	    	    
	    var username = $("#fullName").val();
	    	    
	    if(username != name){
	    	errors.append("Bad account info" + '<br />');
	    } else {
		$.post(str,
			{
				accountNumber:account,
				routingNumber:routing,
				holderName:name,
				cost:cost
			},
				function(data,status){
				    if(data == "updated"){
				    	$(".preConfirm").hide();
				    	$(".postConfirm").show();
				    	update_history_function();
				    } else if(data == "noFunds"){
				    	errors.append("Not enought funds" + '<br />');
				    } else if(data == "badAccount"){
				    	errors.append("Bad account info" + '<br />');
				    }
				  });
		
	    }
	}
  }
  
function update_history_function()
{
	var url = $("#encodedUpdate").val();
	$.post(url);
}
</script>
</head>
<body>
	<jsp:useBean id="flight" scope="session" type="model.Flight" />
	<div><%@include file="/WEB-INF/header.jsp"%></div>
	<div class="content-wrapper">
		<div id="body" style="background:; position: static;">
			<br>
			<div class="preConfirm">
			<h1>Flight Information</h1>
			</div>
			<div class="postConfirm"  style="display: none;">
			<h1>Your purchase has been confirmed</h1>
			<h2>Here is a reminder about your flight information</h2>
			</div>
			<br>
			<section>
				<table>
					<thead>
						<tr>
							<th>Flight Number</th>
							<th>Departure</th>
							<th>Arrival</th>
							<th>Duration</th>
							<th>Airline</th>
							<th>Seats</th>
							<th>Price</th>
							<th>Total Flight Price</th>
						</tr>
					</thead>
					<tbody>
						<c:set var="sum" value="${0}" />
						<c:set var="num" value="${0}" />
						<c:forEach items="${sessionScope.shoppingCart}" var="flight">
							<tr id="row${num}">
								<td><c:out value="${flight.id}"/></td>
								<td><fmt:formatDate value="${flight.departure}"
										pattern="hh:mm a" /></td>
								<td><fmt:formatDate value="${flight.arrival}"
										pattern="hh:mm a" /></td>
								<td><c:out value="${flight.timeDifference}"/></td>
								<td><c:out value="${flight.operator}"/></td>
								<td><c:out value="${flight.seats}"/></td>
								<td>$<c:out value="${flight.cost}"/></td>
								<td id="cost${num}">$${flight.seats * flight.cost}</td>
								<c:set var="sum" value="${sum + flight.seats * flight.cost}" />
							</tr>
							<tr id="error_box${num}"></tr>
							<c:set var="num" value="${num + 1}" />
						</c:forEach>
					</tbody>
				</table>
				<br>
				<div id=totalCost>Total cost: $<c:out value="${pageScope.sum}"/></div>
			</section>
			<div class=preConfirm>
				<div class="error_show" id="error_box2"></div>
				<form method="post" action="#" name="test"
					onsubmit="confirm_function(${pageScope.sum})" id="test">
					<table>
						<tr>
							<td align="right">Account Holder Name</td>
							<td><input type="text" id="holder" name="accountHolder" /></td>
						</tr>
						<tr>
							<td align="right">Routing Number</td>
							<td><input type="text" id="routing" name="routingNumber" /></td>
						</tr>
						<tr>
							<td align="right">Account Number</td>
							<td><input type="text" id="account" name="accountNumber" /></td>
						</tr>
						<tr>
							<td align="right"></td>
							<td>
								<div id="myform_errorloc" class="error_strings"></div>
							</td>
						</tr>
					</table>
					<div style="margin: 5px">
						<c:url value="UpdateHistory" var="encodedURLUpdate"></c:url> 
						<input type="hidden" name="encodedUpdate" id="encodedUpdate" value="${encodedURLUpdate}">	
						<input type="submit" name="Submit" value="Confirm" class="button">
					</div>
					<input type="hidden" name="fullName" id="fullName" value="${client.user.fullname}">
					<input type="hidden" name="errors" id="errors" value="false">
				</form>
				<div style="margin: 5px">
					<form name="Cancel" method="get" action="FlightSearchQuery.jsp">
						<input type="submit" name="Cancel" value="Cancel" class="button">
					</form>
				</div>
			</div>
			<div class="postConfirm" style="display: none;">
				<br>
				<h2>Enter Passenger Info</h2>
				<br>
				<c:url value="PrintTickets" var="encodedURLPrint"></c:url> 
				<form name="Print" method="post" action="${encodedURLPrint}">
					<c:forEach items="${shoppingCart}" var="flight">
						<h3>Flight: <c:out value="${flight.id}"/></h3>
						<c:forEach begin="1" end="${flight.seats}" var="val">
							<div class="passengerInfo">
								<table>
									<tr>
										<td>Name:</td>
										<td><input type="text" name="name" /></td>
									</tr>
									<tr>
										<td>Date of Birth:</td>
										<td><input type="text" name="age" /></td>
									</tr>
									<tr>
										<td>Gender:</td>
										<td><input type="text" name="gender" /></td>
									</tr>
								</table>
							</div>
							<br>
							<input type="hidden" name="flightID" value="${flight.id}">
							<input type="hidden" name="seats" value="${flight.seats}">
							<input type="hidden" name="classType" value="${flight.selectedClass}">
						</c:forEach>
					</c:forEach>
					<input type="submit" name="printTickets" value="Print Tickets"
						class="button">
				</form>

			</div>
		</div>
	</div>

</body>
<script>
var validator = new FormValidator('test', [{
    name: 'accountHolder',
    display: 'Account Holder',
    rules: 'required|alpha'
}, {
    name: 'routingNumber',
    display: 'Routing Number',
    rules: 'required|numeric'
}, {
    name: 'accountNumber',
    display: 'Account Number',
    rules: 'required|numeric'
}], function(errors, event) {
	var SELECTOR_ERRORS = $('#error_box2');
	
    if (errors.length > 0) {
        SELECTOR_ERRORS.empty();

        for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
            SELECTOR_ERRORS.append(errors[i].message + '<br />');
        }
        $("#errors").val("true");
    }    
	event.preventDefault();

});

</script>
</html>
